<template>
  <div class="show-start-time">
    <van-popup v-model="show" :close-on-click-overlay="false">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="removeTheMaskLayer"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="getStartDate"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    showStart: Boolean
  },
  data() {
    return {
      show: false,
      minHour: 10,
      maxHour: 20,
      minDate: new Date(),
      // maxDate: new Date(2020, 10, 1),
      currentDate: new Date()
    };
  },
  computed: {
    maxDate() {
      let date = new Date();
      let year = date.getFullYear() + 1;
      let month = date.getMonth();
      let day = date.getDate();
      return new Date(year, month, day);
    }
  },
  watch: {
    showStart() {
      this.show = true;
    }
  },
  methods: {
    getStartDate() {
      // 由于偶尔数据无响应，所以采用异步
      this.$nextTick(() => {
        this.$emit("handleShowStart", this.currentDate);
        this.show = false;
      });
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      }
      return value;
    },
    removeTheMaskLayer() {
      this.show = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.show-start-time {
  >>> .van-popup--center {
    width: 90%;
  }
}
</style>
